<style lang="less">
@import '../style.less';

.tab-learning {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  min-width: 1024px;
  margin-top: 10px;
  display: flex;

  .bar-active {
    background-color: #eef0f6;
    margin: 2px;
  }

  .welcome {
    background-image: url(../../../assets/images/user-title-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 10px;
    height: 40px;
  }

  .item-highlight {
    background: linear-gradient(to bottom right, #f54f00, #fdb64d);
    color: white;
    font-weight: 600;
  }

  .button-learn {
    cursor: pointer;
    display: inline-block;
    border-radius: 50px;
    font-size: 16px;
    padding: 6px 15px;
    background-color: var(--global-color);
    color: white;
    background: linear-gradient(to bottom right, #f54f00, #fdb64d);
  }

  .button-learning-log {
    cursor: pointer;
    display: inline-block;
    border-radius: 50px;
    font-size: 16px;
    padding: 6px 15px;
    background-color: var(--global-color);
    color: white;
    background: #b5b5b5;
  }

  .el-progress {
    width: calc(100% - 120px);
  }

  .business-img {
    height: 100px;
    width: 100px;
  }

  .exam-table2 {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;
    left: 0;
    top: 0;
  }

  .exam-table2 > .center {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-width: 800px;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background: #fff;

    .center_title {
      padding: 10px 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      position: relative;
      background: #ffffff;
      border: 1px solid #e6e6e6;

      em {
        font-style: normal;
        color: #0919f5;
      }
    }

    .center_title button {
      position: absolute;
      font-size: 20px;
      color: #888;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .business-desc {
    height: 60px;
    width: calc(100% - 100px);
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
  }

  .bar-content {
    display: flex;
    align-items: center;
    border-top: 1px solid #ececec;

    .bar-item {
      width: 50%;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>

<template>
	<div class="tab-learning">
		<div style="background-color:#fffcfb;width:250px;height:100%;overflow-y:auto;">
			<div @click="toUrl('number')" class="welcome">
				数字录入
				<i class="el-icon-arrow-right"></i>
			</div>
			<div @click="toUrl('citation')" class="welcome">
				传票翻打（随机）
				<i class="el-icon-arrow-right"></i>
			</div>
			<div @click="toUrl('citation_fixed')" class="welcome">
				传票翻打（固定）
				<i class="el-icon-arrow-right"></i>
			</div>
			<div class="welcome">
				<div style="margin-right: 26px;">培训信息</div>
			</div>
			<div>
				<div class="bar-content">
					<div
						:class="{'bar-item': true,
                                  'fefbef-hover': true,
                                  'bar-active': taskNature == '必修'}"
						@click="barClick('必修')"
					>必修</div>
					<div
						:class="{'bar-item': true,
                                  'fefbef-hover': true,
                                  'bar-active': taskNature == '选修'}"
						@click="barClick('选修')"
					>选修</div>
				</div>
				<div
					:class="{'item-highlight': currentTraining && item.id === currentTraining.id}"
					:key="item.id"
					@click="() => selectTraining(item)"
					style="padding:10px 25px 10px 25px;cursor:pointer;"
					v-for="item in studyReportTasks"
					v-if="item.taskNature === taskNature || (taskNature == '必修' && !item.taskNature)"
				>{{item.name}} {{item.taskNature ? `(${item.taskNature})` : '(必修)'}}</div>
			</div>
		</div>
		<div style="margin-left:10px;width:calc(100% - 260px);height:100%;">
			<div style="height:300px;display:flex;">
				<div style="width:calc(50% - 5px);background-color:#fffcfb;margin: 0px 5px 0px 0px;text-align:center;">
					<img
						:src="`/api${currentBusinessTemplates[0].businessImageUrl}`"
						style="padding: 20px; height: calc(100% - 40px); max-width: calc(100% - 40px);"
						v-if="currentTraining && currentBusinessTemplates && currentBusinessTemplates.length > 0"
					>
					<img
						src="../../../assets/images/business.png"
						style="padding: 20px; height: calc(100% - 40px); max-width: calc(100% - 40px);"
						v-else
					>
				</div>
				<div style="width:calc(50% - 5px);background-color:#fffcfb;;margin: 0px 0px 0px 5px;position:relative;">
					<div style="padding:20px;display:flex;margin-top:20px;">
						<div style="padding-right: 30px;">完成进度</div>
						<el-progress :percentage="finishPercent" :stroke-width="18" :text-inside="true" color="var(--global-color)"></el-progress>
					</div>
					<div style="padding: 0px 20px 20px 20px;display:flex;">
						<div style="padding-right:30px;">截止日期</div>
						<div v-if="currentTraining">{{currentTraining.endTime}}</div>
					</div>
					<div style="padding: 0px 20px 20px 20px;display:flex;">
						<div style="padding-right:30px;">业务总数</div>
						<div v-if="currentTraining">{{currentBusinessTemplates.length}}</div>
					</div>
					<div style="padding: 0px 20px 20px 20px;display:flex;">
						<div style="padding-right:30px;">业务描述</div>
						<div class="business-desc">{{currentTraining ? currentTraining.comment : ''}}</div>
					</div>

					<div style="width:305px;display:flex;margin-left:auto;margin-right:auto;">
						<div
							:class="{ 'button-learn': currentTraining && isValid(currentTraining.endTime),
                                       'button-learning-log': !currentTraining || !isValid(currentTraining.endTime)
                                     }"
							@click="startLearning"
							style="margin-right:10px;"
						>开始业务学习 >></div>
						<div @click="studyLogClick" class="button-learning-log" style="margin-left:10px;">查看学习日志</div>
					</div>
				</div>
			</div>
			<div style="margin-top:10px;height:calc(100% - 310px);overflow-y:auto;overflow-x:hidden;background-color:#fffcfb;">
				<div style="height:50px;text-align:center;line-height:50px;font-size:20px;background-color:#fefbef;">业务明细</div>
				<div
					:key="item.id"
					style="cursor:pointer;margin-bottom:5px;display:flex;background-color:#f7f7f7;"
					v-for="item in currentBusinessTemplates"
					v-if="currentTraining"
				>
					<img :src="`/api${item.businessImageUrl}`" class="business-img">
					<div style="padding-left:20px;">
						<div style="padding-top:20px;">{{item.name}}</div>
						<div style="padding-top:15px;font-size:14px;color:#909090;">{{item.comment}}</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 业务列表 -->
		<div @touchmove.prevent class="exam-table2" v-if="showLog">
			<div class="center">
				<div class="center_title">
					<em>学习日志</em>
					<el-button @click="showLog=false" circle icon="el-icon-close" plain type="text"/>
				</div>
				<table-ex
					:columns="logColumns"
					:on-option="onClickOption"
					:on-page-change="onPageChange"
					:rows="logList"
					:total="logRes.total"
					selection="none"
				/>
			</div>
		</div>
	</div>
</template>

<script>
/**
 * 学习中心
 */
import moment from 'moment'
import { mapActions, mapGetters } from 'vuex'
import { Base64 } from 'js-base64'
import api from '@/api'
import { Message } from 'element-ui'
import tableEx from '@/components/table/tableEx'
import pageConfig from '../config'

export default {
  name: 'tab-learning',
  components: {
    'table-ex': tableEx
  },
  data() {
    return {
      currentTraining: null,
      businesses: null,
      showLog: false,
      finishPercent: 0,
      taskNature: '必修',
      logRes: {},
      logList: [],
      logColumns: pageConfig.logColumns
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    ...mapGetters(['loginUser', 'studyReportTasks']),
    currentBusinessTemplates() {
      this.businesses = api.getBusinessTemplatesFromTraining(
        this.currentTraining
      )
      return this.businesses
    }
  },
  methods: {
    ...mapActions(['getStudyReport']),
    isValid(endTime) {
      const endDate = moment(endTime)
      const currentDate = moment(moment().format('YYYY-MM-DD'))
      console.log('isValid', endDate, currentDate)
      return endDate.isAfter(currentDate)
    },
    loadData() {
      this.getStudyReport({
        loading: false,
        filter: {
          employeeIds: [this.loginUser.userInfo.employeeId],
          taskEnabled: true
        }
      })
    },
    barClick(type) {
      this.taskNature = type
    },
    studyLogClick() {
      let params = {
        filter: {
          businessKeyword: '',
          employeeId: this.$ls.get('loginUser').userInfo.employeeId,
          taskId: this.currentTraining.id
        },
        number: 0,
        size: 10
      }
      api.studyLog({
        loading: false,
        method: 'post',
        data: params,
        success: res => {
          // res['content'] = [pageConfig.studyLogItem, pageConfig.studyLogItem, pageConfig.studyLogItem]
          if (res.content && res.content.length) {
            this.logRes = res
            let arr = []
            let content = res.content
            for (let item of content) {
              let objc = {}
              objc['name'] = item.business.name
              objc['counterName'] = item.business.counter
                ? item.business.counter.name
                : ''
              objc['opTimes'] = item.opTimes
              objc['opStartTime'] = item.lastRecord
                ? item.lastRecord.opStartTime
                : ''
              objc['timeCost'] = item.timeCost >= 0 ? item.timeCost : '无数据'
              objc['grade'] = item.lastRecord ? item.lastRecord.grade : ''
              arr.push(objc)
            }
            this.showLog = true
            this.logList = arr
          } else {
            Message({
              center: true,
              message: '暂无相关数据'
            })
          }
        }
      })
    },
    selectTraining(item) {
      this.currentTraining = item
      this.finishPercent = item.businessCountOfAssigned
        ? parseInt(
            (item.businessCountOfFinished / item.businessCountOfAssigned) * 100
          )
        : 0
    },
    startLearning() {
      if (
        !this.currentTraining ||
        !this.isValid(this.currentTraining.endTime)
      ) {
        Message({
          center: true,
          message: '学习已经过期'
        })
        return
      }
      this.$router.push({
        name: 'courseBusiness',
        query: {
          course: Base64.encode(
            JSON.stringify({
              businessId: this.businesses[0].id,
              trainingId: this.currentTraining.id,
              learningId: this.currentTraining.learningTasks[0].id,
              mode: 'study'
            })
          )
        }
      })
      this.$store.commit('course/update', {
        businessTemplates: this.businesses
      })
    },
    toUrl(path) {
      this.$router.push({ path: '/typingTraining', query: { tabName: path } })
    }
  }
}
</script>
